<template>
  <el-card style="height: 100%;">
    <!-- 1.面包屑 -->
    <MyBread url="coach" level1="学员管理" />
    <!-- 2.搜索 -->
    <div>
      <el-input
        placeholder="请输入学员姓名"
        v-model="search"
        class="with-input"
        style="margin-top: 30px"
        clearable
        :disabled="disableInput"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="searchUser()"
        ></el-button>
      </el-input>
      <el-button type="primary" @click="showAllStudentMessage">显示所有</el-button>
    </div>
    <el-input
      placeholder="请输入学员姓名"
      v-model="searchTable"
      class="with-input"
      style="margin-top: 20px; margin-bottom: 30px"
      clearable
      :disabled="!disableInput"
    >
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="searchUserLincense()"
      ></el-button>
    </el-input>
    <el-button type="primary" @click="showLincense(1)">查看已领证的</el-button>
    <el-button type="primary" @click="showLincense(0)">查看未领证的</el-button>
    <el-button type="primary" @click="reportTeachProgressButton()" plain>上报教学进度</el-button>
    <div v-if="number === 0">
      <!-- 3.表格 -->
      <el-table :data="CoachStudentInfo" style="width: 100%">
        <el-table-column prop="id" label="ID" width="50"></el-table-column>
        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
        <el-table-column prop="sex" label="性别" width="100"></el-table-column>
        <el-table-column
          prop="identify"
          label="身份证号"
          width="230"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          width="170"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="当前住址"
          width="280"
        ></el-table-column>
        <el-table-column prop="model" label="申请车型"></el-table-column>
        <el-table-column prop="date" label="领证日期"></el-table-column>
      </el-table>
      <!-- 4.分页 -->
      <el-pagination
        style="margin-top: 30px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="length"
      ></el-pagination>
    </div>
    <!-- 5.表格-过滤领证与未领证的 -->
    <el-table
      :data="middleVariable"
      style="width: 100%"
      max-height="650"
      v-else-if="number === 1"
    >
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名" width="100"></el-table-column>
      <el-table-column prop="sex" label="性别" width="100"></el-table-column>
      <el-table-column
        prop="identify"
        label="身份证号"
        width="230"
      ></el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="170"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="住址"
        width="280"
      ></el-table-column>
      <el-table-column prop="model" label="申请车型"></el-table-column>
      <el-table-column
        prop="date"
        label="领证日期"
        sortable
      ></el-table-column>
    </el-table>
    <!-- 6.对话框 -->
    <el-dialog
      title="上报教学进度"
      :visible.sync="dialogFormVisible"
      width="440"
    >
      <el-select v-model="TeachingProgress" style="width: 100%">
        <el-option
          v-for="item in SubjectOptions"
          :key="item.progress"
          :label="item.subject"
          :value="item.progress"
        >
        </el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelReport()">取 消</el-button>
        <el-button type="primary" @click="reportTeachProgress()">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "StudentUser",
  data() {
    return {
      search: "",          // 搜索输入框输入的内容 -- 搜索所有
      searchTable: "",     // 搜索输入框输入的内容 -- 搜索领证与未领证的 -- 过滤
      disableInput: false, // 控制输入框的禁用
      number: 0, // 0：显示所有表格 1：显示已领证与未领证表格
      page: 1,   // 当前页数
      limit: 2,  // 每条页面条数
      length: 0, // 获取数据的长度
      filterData: [],     // 过滤后的表格 -- 已领证与未领证
      middleVariable: [], // 中间数据，与filterData结合使用
      dialogFormVisible: false, // 上报教学进度
      TeachingProgress: "",     // 教学进度 --> 从 【上报教学进度选项】 获取
      // 上报教学进度选项
      SubjectOptions: [
        { subject: "科目一", progress: 1 },
        { subject: "科目二", progress: 2 },
        { subject: "科目三", progress: 3 },
        { subject: "科目四", progress: 4 },
      ],
    };
  },
  methods: {
    // 对话框取消上报教学进度
    cancelReport() {
      this.dialogFormVisible = false;
      this.TeachingProgress = "";
    },
    // 显示领证与未领证的数据 -- 过滤
    showLincense(val) {
      this.disableInput = true;
      this.number = 1;
      this.searchTable = "";
      if (val === 0) {
        this.middleVariable = this.filterData = this.AllCoachStudentInfo.filter(
          (data) => !data.date
        );
      } else {
        this.middleVariable = this.filterData = this.AllCoachStudentInfo.filter(
          (data) => data.date
        );
      }
    },
    // 显示所有学员数据
    showAllStudentMessage() {
      this.disableInput = false;
      this.number = 0;
    },
    // 搜索功能实现 -- 分页
    async searchUser() {
      // 获取搜索后的学员数据长度
      this.length = (
        await this.$store.dispatch("CoachModule/getSearchedCoachStudentInfo", {
          url: "/student",
          like: this.search,
          id: this.CurrentCoachInfo.id,
        })
      ).length;
      this.limit = 2;
      this.page = 1;
      this.getStudentListByPaging();
      this.search = "";
    },
    // 过滤搜索数据
    searchUserLincense() {
      this.middleVariable = this.filterData.filter(
        (data) =>
          !this.searchTable ||
          data.name.toLowerCase().includes(this.searchTable.toLowerCase())
      );
      this.searchTable = "";
    },
    // 分页获取学员数据 -- 分类
    getStudentListByPaging() {
      this.$store.dispatch("CoachModule/getCoachStudentInfoByPaging", {
        url: "/student",
        page: this.page,
        limit: this.limit,
        like: this.search,
        id: this.CurrentCoachInfo.id,
      });
    },
    // 当每页条数发生变化使调用
    handleSizeChange(val) {
      this.limit = val;
      this.page = 1;
      this.getStudentListByPaging();
    },
    // 当页数发生变化时调用
    handleCurrentChange(val) {
      this.page = val;
      this.getStudentListByPaging();
    },
    // 上报教学进度按钮 -- 验证权限
    async reportTeachProgressButton() {
      if (!(await this.haveThisPermission(this.$route.path,"上报教学进度"))) {
        this.$message.warning("您当前没有该权限");
        return;
      }
      this.dialogFormVisible = true;
    },
    // 上报教学进度
    async reportTeachProgress() {
      if (this.TeachingProgress !== "") {
        this.CurrentCoachInfo.progress = this.TeachingProgress;
        await this.$https.updateUserData(
          "/coach",
          this.CurrentCoachInfo.id,
          this.CurrentCoachInfo
        );
        this.dialogFormVisible = false;
        this.TeachingProgress = "";
        this.$message.success("已成功上报");
      } else {
        this.$message.warning("教学进度不能为空");
      }
    },
  },
  computed: {
    ...mapState("CoachModule", [
      "CoachStudentInfo",
      "CurrentCoachInfo",
      "AllCoachStudentInfo",
    ]),
  },
  async mounted() {
    // 获取登录用户的信息 -- 教练信息
    await this.$store.dispatch("CoachModule/getCurrentCoachInfo");
    // 根据用户的 id 获取所有学员数据信息
    await this.$store.dispatch("CoachModule/getAllCoachStudentInfo", {
      url: "/student",
      id: this.CurrentCoachInfo.id,
    });
    this.length = this.AllCoachStudentInfo.length;
    this.getStudentListByPaging();
  },
};
</script>

<style scoped>
.with-input {
  width: 500px;
  margin-right: 10px;
}
</style>